*,
*:after,
*:before {
    box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
input {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-family: STHeitiSC-Light;
    font: inherit;
    vertical-align: baseline;
}

html,
body,
form,
fieldset,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-text-size-adjust: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: arial, sans-serif;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

ins,
a {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    display: inline-block;
}

input,
textarea {
    border: none;
    background: none;
    outline: none;
    -webkit-appearance: none;
}

* {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
}

$base-size:75px;
@function rem($val) {
    @return$val/$base-size*1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

.A {
    width: 100%;
    height: 100%;
}

@mixin wh( $w, $h, $bk) {
    width: $w;
    height: $h;
    background: $bk
}

header {
    @include wh(100%, rem(90px), white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 rem(20px);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    .a1 {
        @include wh(rem(474px), rem(66px), #f1f1f1);
        border-radius: rem(40px);
        i {
            font-size: rem(24px);
            color: #999999;
            line-height: rem(66px);
        }
        input {
            color: #999999;
        }
    }
    .a2 {
        width: rem(152px);
        height: rem(58px);
        background: white;
        border-radius: rem(30px);
        border: 1px solid #999999;
        ul {
            display: flex;
            li {
                flex: 1;
                line-height: rem(58px);
                padding-left: rem(20px);
                i.iconfont {
                    font-size: rem(34px);
                }
            }
        }
    }
}

section {
    @include wh(100%, auto, #fafafa);
    flex: 1;
    padding: 0 rem(20px);
    overflow: hidden;
    overflow-y: scroll;
    .b1 {
        @include wh(100%, auto, white);
        margin-top: rem(20px);
        border-radius: rem(50px);
        ul {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            li {
                width: 20%;
                padding-top: rem(30px);
                text-align: center;
                padding: rem(20px) rem(25px);
                img {
                    width: 100%;
                }
                p {
                    white-space: nowrap;
                    font-size: rem(20px);
                    color: #363636;
                    padding-top: rem(10px);
                }
            }
        }
    }
    .b2 {
        @include wh(100%, auto, white);
        margin-top: rem(20px);
        border-radius: rem(50px);
        .top {
            padding: 0 rem(20px);
            width: 100%;
            height: rem(80px);
            ul {
                float: left;
                li {
                    font-size: rem(36px);
                    line-height: rem(80px);
                }
            }
            ol {
                float: right;
                li {
                    font-size: rem(22px);
                    line-height: rem(80px);
                    a {
                        color: #868686;
                    }
                    i.iconfont {
                        font-size: rem(16px);
                        color: #868686;
                    }
                }
            }
        }
        .bottom {
            @include wh(100%, auto, white);
            ul {
                display: flex;
                padding: 0 rem(30px);
                width: 100%;
                li {
                    width: 33.3%;
                    text-align: center;
                    padding-right: rem(15px);
                    padding-bottom: rem(24px);
                    img {
                        width: 100%;
                    }
                    p {
                        white-space: nowrap;
                        font-size: rem(30px);
                    }
                    span {
                        white-space: nowrap;
                        font-size: rem(24px);
                        color: #8e8e84;
                    }
                }
            }
        }
    }
    .c {
        @include wh(100%, auto, none);
        margin-top: rem(20px);
        border-radius: rem(50px);
        img {
            width: 100%;
        }
    }
    .d {
        @include wh(100%, auto, none);
        margin-top: rem(20px);
        border-radius: rem(50px);
        padding: 0 rem(30px);
        img {
            width: 100%;
        }
        p {
            font-size: rem(34px);
            color: black;
            padding-top: rem(18px);
        }
        ul {
            width: 100%;
            display: flex;
            padding-top: rem(15px);
            li {
                padding: 0 rem(10px);
                width: 33.3%;
                img {
                    width: 100%;
                }
                h4 {
                    font-size: rem(22px);
                    color: #6a6a6a;
                    white-space: nowrap;
                }
                span {
                    font-size: rem(22px);
                    color: red;
                    padding-bottom: rem(32px)
                }
            }
        }
    }
    .e {
        @include wh(100%, auto, none);
        margin-top: rem(20px);
        border-radius: rem(50px);
        padding: 0 rem(30px);
        .to {
            width: 100%;
            height: auto;
            height: rem(78px);
            ol {
                float: left;
                li {
                    float: left;
                    line-height: rem(78px);
                    font-size: rem(36px);
                }
                span {
                    line-height: rem(78px);
                    font-size: rem(28px);
                    padding-left: rem(15px);
                    color: #636363;
                }
            }
            ul {
                float: right;
                li {
                    font-size: rem(22px);
                    a {
                        color: #868686;
                        line-height: rem(78px);
                    }
                    i.iconfont {
                        font-size: rem(16px);
                        color: #868686;
                        line-height: rem(78px);
                    }
                }
            }
        }
        .bt {
            @include wh(100%, auto, none);
            padding-left: rem(10px);
            ul {
                display: flex;
                width: 100%;
                li {
                    width: 33.3%;
                    img {
                        width: 100%;
                        padding-right: rem(20px);
                    }
                    p {
                        font-size: rem(24px);
                        color: black;
                    }
                    span {
                        font-size: rem(24px);
                        color: red;
                        padding-bottom: rem(15px);
                    }
                }
            }
        }
    }
    .f {
        @include wh(100%, rem(118px), none);
        padding: 0 rem(30px);
        h2 {
            line-height: rem(118px);
            font-size: rem(36px);
            color: black;
        }
    }
    .g {
        @include wh(100%, auto, none);
        padding: 0 rem(30px);
        img {
            width: 100%;
        }
    }
}

footer {
    @include wh(100%, rem(90px), white);
    padding: 0 rem(30px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    .fff {
        ul {
            li {
                i.iconfont {
                    font-size: rem(36px);
                    color: #565656;
                }
                p {
                    font-size: rem(16px);
                    color: #8e8e8e;
                }
            }
        }
    }
}